---
title: 通过命令行来自动安装 Astro
description: 如何通过 create-astro 命令行工具使用 NPM、PNPM 或 Yarn 安装 Astro。
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

准备好安装 Astro 了吗？按照本指南开始使用 `create astro` CLI。

:::note[更喜欢手动安装 ASTRO？]
请阅读我们的[分步手动安装指南](/zh-cn/install/manual/)。
:::

#### 前提准备

- **Node.js** - `v18.14.1` 或更高版本。
- **文本编辑器** - 我们建议使用安装有 [Astro 官方扩展](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)的 [VS Code](https://code.visualstudio.com/)。
- **终端（Terminal）** - Astro 可以通过其命令行界面 (CLI) 访问。

#### 安装

`create astro` 是从头开始新 Astro 项目的最快方式。它将引导你完成设置新 Astro 项目的每一步。 它允许你从几个不同的官方入门模板中进行选择，你也可以[传递--template 参数来使用 GitHub 上的任何现有项目](#入门模板)。

:::tip[在线预览]
想要在浏览器中试用 Astro？ 访问 [astro.new](https://astro.new/) 浏览我们的入门模板并在不离开浏览器的情况下启动一个新的 Astro 项目。
:::

## 1. 运行安装向导

在你的终端中运行以下命令以启动我们方便的安装向导：

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # 使用 npm 创建一个新项目
  npm create astro@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # 使用 pnpm 创建一个新项目
  pnpm create astro@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # 使用 yarn 创建一个新项目
  yarn create astro
  ```
  </Fragment>
</PackageManagerTabs>

你可以在计算机上的任何位置运行 `create astro`，因此你无需在开始之前为你的项目创建一个新的空目录。 如果你的新项目还没有空目录，该向导会帮你自动创建一个。

如果一切顺利的话，在一些建议的后续步骤之后，你应该会看到 “Liftoff confirmed. Explore your project!” 。 `cd` 进入你的新项目目录以开始使用 Astro。

如果你在 CLI 向导期间跳过了 `npm install` 步骤，请确保在继续之前安装你的依赖项。

## 2. 启动 Astro ✨

Astro 带有一个内置的开发服务器，拥有项目开发所需的一切。 `astro dev` 命令将启动一个本地开发服务器，这样你就可以第一次看到你的新网站正在运行。

每个入门模板都带有一个预配置的脚本，可以为你运行 `astro dev`。 使用你最喜欢的包管理器运行此命令并启动 Astro 开发服务器。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>


如果一切顺利，Astro 现在应该可以在 [http://localhost:4321/](http://localhost:4321/) 上为你的项目提供服务了！

Astro 将实时监听 `src/` 目录中的文件更改，因此你在开发过程中进行更改时无需重新启动服务器。

在浏览器中查看你的站点时，你可以访问 [Astro 开发者工具栏](/zh-cn/guides/dev-toolbar/)。在你进行构建时，它将帮助你检查你的[群岛](/zh-cn/concepts/islands/)、发现无障碍性问题等等。

如果你无法在浏览器中打开你的项目，请返回运行 `dev` 命令的终端并查看是否发生错误，或者检查你的项目的服务 URL 是否与​上方​链接的 URL 不同。

## 入门模板

你还可以通过将 `--template` 参数传递给 `create astro` 命令，基于[官方示例](https://github.com/withastro/astro/tree/main/examples)或者任何 GitHub 存储库的`main` 分支来启动一个新的 astro 项目。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # 使用官方示例创建一个新项目
  npm create astro@latest -- --template <example-name>

  # 基于某个 GitHub 仓库的 main 分支创建一个新项目
  npm create astro@latest -- --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # 使用官方示例创建一个新项目
  pnpm create astro@latest --template <example-name>
  
  # 基于某个 GitHub 仓库的 main 分支创建一个新项目
  pnpm create astro@latest --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # 使用官方示例创建一个新项目
  yarn create astro --template <example-name>
  
  # 基于某个 GitHub 仓库的 main 分支创建一个新项目
  yarn create astro --template <github-username>/<github-repo>
  ```
  </Fragment>
</PackageManagerTabs>

默认情况下，此命令将使用模板仓库的`main`分支。要使用不同的分支，请将其作为 `--template` 参数的一部分传递：`<github-username>/<github-repo>#<branch>`。

探索我们的[主题和入门展示](https://astro.build/themes/)，你可以在其中浏览博客、个人作品集、文档、落地页等主题！ 或者，[在 GitHub 上搜索](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories)更多入门项目。


## 接下来...

好了！你现在可以开始使用 Astro 进行构建了！ 🥳

以下是我们建议接下来探索的几个主题，你可以按任何顺序阅读它们。你甚至可以暂时离开我们的文档去玩转你的新 Astro 项目代码库，当你遇到麻烦或有疑问时，欢迎你随时返回这里。

import { CardGrid, LinkCard } from '@astrojs/starlight/components';

<CardGrid>
  <LinkCard
    title="了解你的代码库"
    description="在我们的项目结构指南中了解更多关于 Astro 项目结构的信息。"
    href="/zh-cn/basics/project-structure/"
  />
  <LinkCard
    title="添加框架"
    description="在我们集成指南中学习如何扩展 Astro 以支持 React、Svelte、Tailwind 等。"
    href="/zh-cn/guides/integrations-guide/"
  />
  <LinkCard
    title="部署你的网站"
    description="在我们的部署指南中了解如何构建 Astro 项目并将其部署到网络。"
    href="/zh-cn/guides/deploy/"
  />
</CardGrid>
